<template>
    <view class="cu-item" :class="[right_icon=='arrow'?'arrow':'']">
        <view v-if="left_icon && left_icon != 'arrow'" class="action margin-right-20 text-50">
            <text class="text-deep-nddyny" :class="left_icon"></text>
        </view>
        <view class="content padding-tb-26" @tap="_tapContent">
            <view :class="class_top_title">
                <text v-if="top_icon" :class="top_icon" class="text-nddyny margin-right-10"></text>
                {{top_title}}
                <slot name="top_title"></slot>
            </view>
            <view class="text-gray text-sm" :class="class_bottom_title">
                <text v-if="bottom_icon" :class="bottom_icon" class="margin-right-10"></text>
                {{bottom_title}}
                <slot name="bottom_title"></slot>
            </view>
        </view>
        <view v-if="right_icon && right_icon != 'arrow'" class="action text-xxl margin-left-sm" @tap="_tap">
            <text class="text-deep-nddyny" :class="right_icon"></text>
        </view>
    </view>
</template>

<script>
    export default {
        props: [
            'uri', 'tap', 'tapContent',
            'top_icon', 'top_title', 'class_top_title',
            'bottom_icon', 'bottom_title', 'class_bottom_title',
            'right_icon', 'left_icon'
        ],
        data() {
            return {}
        },
        methods: {
            _tap() {
                if (this.tap) {
                    this.tap();
                }
                if (this.uri) {
                    this.$store.commit('userNavTo', this.uri);
                }
            },
            _tapContent() {
                if (!this.tapContent) {
                    this._tap();
                    return;
                }
                if (this.tapContent) {
                    this.tapContent();
                }
            }
        }
    }
</script>
